.chatsDetail {
  width: 100%;
  &__ {
    &msgList {
      overflow: scroll;
      height: calc(100vh - 120px);
      padding-bottom: 130px;
      &- {
        &item {
          display: flex;
          padding: 20px;
          flex-wrap: wrap;

          &- {
            &sender {
              width: 100%;
              margin-bottom: 10px;
              img {
                width: 20px;
                height: 20px;
                border-radius: 50%;
                padding-right: 10px;
              }
            }

            &content {
              padding: 10px;
              border-radius: 4px;
              background-color: aquamarine;
              width: max-content;

              &-- {
                &for-me {
                  background-color: #f1f1f1;
                  display: inline-block;
                  width: max-content;
                  padding: 10px;
                  border-radius: 4px;
                }
              }
            }
          }

          &-- {
            &for-me {
              text-align: right;
              justify-content: right;
              padding-right: 20px;
              margin-top: 20px;
            }
          }
        }
      }
    }

    &bottom {
      box-sizing: border-box;
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      padding-top: 10px;

      .van-field {
        background-color: #f0f1f4 !important;
      }

      &- {
        &msgType {
          display: flex;
          align-items: center;
          gap: 14px;
          padding: 10px 20px;
          background-color: #fff;
          border-top: 1px solid #f0f1f4;
        }
      }
    }
  }
}

.chatsDetail__msgList-item-content-text {
  img {
    width: 100px;
    height: 100px;
    border-radius: 4px;
  }
}
